<template>
  <div class="health-chart-component">
    <!-- 图表头部 -->
    <div class="chart-header">
      <div class="header-left">
        <h3 class="chart-title">
          <i class="fas fa-chart-line"></i>
          {{ title || '健康数据趋势' }}
        </h3>
        <p class="chart-subtitle" v-if="subtitle">{{ subtitle }}</p>
      </div>
      
      <div class="header-right">
        <!-- 时间范围选择 -->
        <el-select 
          v-model="selectedTimeRange"
          @change="onTimeRangeChange"
          size="small"
          class="time-range-select"
        >
          <el-option 
            v-for="range in timeRanges"
            :key="range.value"
            :label="range.label"
            :value="range.value"
          />
        </el-select>
        
        <!-- 图表类型切换 -->
        <el-button-group class="chart-type-group">
          <el-button 
            v-for="type in chartTypes"
            :key="type.value"
            :type="selectedChartType === type.value ? 'primary' : 'default'"
            @click="selectedChartType = type.value"
            size="small"
          >
            <i :class="type.icon"></i>
          </el-button>
        </el-button-group>
        
        <!-- 更多操作 -->
        <el-dropdown @command="handleCommand" trigger="click">
          <el-button size="small" type="text">
            <i class="fas fa-ellipsis-v"></i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="export">导出图表</el-dropdown-item>
              <el-dropdown-item command="fullscreen">全屏显示</el-dropdown-item>
              <el-dropdown-item command="refresh">刷新数据</el-dropdown-item>
              <el-dropdown-item command="settings" divided>图表设置</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    
    <!-- 数据指标卡片 -->
    <div class="metrics-cards" v-if="showMetrics">
      <div 
        v-for="metric in metrics"
        :key="metric.key"
        class="metric-card"
        :class="{ active: selectedMetrics.includes(metric.key) }"
        @click="toggleMetric(metric.key)"
      >
        <div class="metric-icon" :style="{ backgroundColor: metric.color }">
          <i :class="metric.icon"></i>
        </div>
        <div class="metric-content">
          <div class="metric-label">{{ metric.label }}</div>
          <div class="metric-value">{{ formatMetricValue(metric) }}</div>
          <div class="metric-change" :class="getChangeClass(metric.change)">
            <i :class="getChangeIcon(metric.change)"></i>
            {{ Math.abs(metric.change) }}%
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图表容器 -->
    <div class="chart-container" :class="{ loading: isLoading }">
      <!-- 加载状态 -->
      <div v-if="isLoading" class="chart-loading">
        <el-icon class="is-loading">
          <Loading />
        </el-icon>
        <p>正在加载数据...</p>
      </div>
      
      <!-- 空数据状态 -->
      <div v-else-if="!chartData || chartData.length === 0" class="chart-empty">
        <div class="empty-icon">
          <i class="fas fa-chart-line"></i>
        </div>
        <h4>暂无数据</h4>
        <p>当前时间范围内没有健康数据</p>
        <el-button @click="refreshData" type="primary" size="small">
          <i class="fas fa-refresh"></i>
          刷新数据
        </el-button>
      </div>
      
      <!-- 图表内容 -->
      <div v-else class="chart-content">
        <!-- 折线图 -->
        <div v-if="selectedChartType === 'line'" class="line-chart">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart :data="chartData" :margin="chartMargin">
              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
              <XAxis 
                :dataKey="xAxisKey"
                :tickFormatter="formatXAxisTick"
                stroke="#666"
                fontSize="12"
              />
              <YAxis 
                :tickFormatter="formatYAxisTick"
                stroke="#666"
                fontSize="12"
              />
              <Tooltip 
                :content="CustomTooltip"
                :cursor="{ stroke: '#2c5aa0', strokeWidth: 1 }"
              />
              <Legend 
                :content="CustomLegend"
                wrapperStyle="padding-top: 20px"
              />
              
              <Line 
                v-for="metric in activeMetrics"
                :key="metric.key"
                :dataKey="metric.key"
                :stroke="metric.color"
                :strokeWidth="2"
                :dot="{ fill: metric.color, strokeWidth: 2, r: 4 }"
                :activeDot="{ r: 6, stroke: metric.color, strokeWidth: 2 }"
                connectNulls
              />
            </LineChart>
          </ResponsiveContainer>
        </div>
        
        <!-- 柱状图 -->
        <div v-else-if="selectedChartType === 'bar'" class="bar-chart">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart :data="chartData" :margin="chartMargin">
              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
              <XAxis 
                :dataKey="xAxisKey"
                :tickFormatter="formatXAxisTick"
                stroke="#666"
                fontSize="12"
              />
              <YAxis 
                :tickFormatter="formatYAxisTick"
                stroke="#666"
                fontSize="12"
              />
              <Tooltip :content="CustomTooltip" />
              <Legend :content="CustomLegend" />
              
              <Bar 
                v-for="metric in activeMetrics"
                :key="metric.key"
                :dataKey="metric.key"
                :fill="metric.color"
                radius="[4, 4, 0, 0]"
              />
            </BarChart>
          </ResponsiveContainer>
        </div>
        
        <!-- 面积图 -->
        <div v-else-if="selectedChartType === 'area'" class="area-chart">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart :data="chartData" :margin="chartMargin">
              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
              <XAxis 
                :dataKey="xAxisKey"
                :tickFormatter="formatXAxisTick"
                stroke="#666"
                fontSize="12"
              />
              <YAxis 
                :tickFormatter="formatYAxisTick"
                stroke="#666"
                fontSize="12"
              />
              <Tooltip :content="CustomTooltip" />
              <Legend :content="CustomLegend" />
              
              <Area 
                v-for="metric in activeMetrics"
                :key="metric.key"
                :dataKey="metric.key"
                :stroke="metric.color"
                :fill="metric.color"
                :fillOpacity="0.3"
                strokeWidth="2"
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>
        
        <!-- 散点图 -->
        <div v-else-if="selectedChartType === 'scatter'" class="scatter-chart">
          <ResponsiveContainer width="100%" height="100%">
            <ScatterChart :data="scatterData" :margin="chartMargin">
              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
              <XAxis 
                :dataKey="scatterXKey"
                :tickFormatter="formatXAxisTick"
                stroke="#666"
                fontSize="12"
              />
              <YAxis 
                :dataKey="scatterYKey"
                :tickFormatter="formatYAxisTick"
                stroke="#666"
                fontSize="12"
              />
              <Tooltip :content="CustomScatterTooltip" />
              <Legend :content="CustomLegend" />
              
              <Scatter 
                v-for="metric in activeMetrics"
                :key="metric.key"
                :data="getScatterData(metric.key)"
                :fill="metric.color"
              />
            </ScatterChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
    
    <!-- 图表设置对话框 -->
    <el-dialog
      v-model="settingsDialogVisible"
      title="图表设置"
      width="500px"
      :before-close="closeSettings"
    >
      <div class="chart-settings">
        <!-- 显示设置 -->
        <div class="setting-section">
          <h4>显示设置</h4>
          
          <div class="setting-item">
            <label>显示网格线</label>
            <el-switch v-model="chartSettings.showGrid" />
          </div>
          
          <div class="setting-item">
            <label>显示图例</label>
            <el-switch v-model="chartSettings.showLegend" />
          </div>
          
          <div class="setting-item">
            <label>显示数据点</label>
            <el-switch v-model="chartSettings.showDots" />
          </div>
          
          <div class="setting-item">
            <label>平滑曲线</label>
            <el-switch v-model="chartSettings.smoothLine" />
          </div>
        </div>
        
        <!-- 颜色设置 -->
        <div class="setting-section">
          <h4>颜色设置</h4>
          
          <div 
            v-for="metric in metrics"
            :key="metric.key"
            class="color-setting"
          >
            <label>{{ metric.label }}</label>
            <el-color-picker 
              v-model="metric.color"
              @change="updateMetricColor(metric.key, $event)"
            />
          </div>
        </div>
        
        <!-- 数据设置 -->
        <div class="setting-section">
          <h4>数据设置</h4>
          
          <div class="setting-item">
            <label>数据点数量</label>
            <el-input-number 
              v-model="chartSettings.dataPoints"
              :min="10"
              :max="100"
              size="small"
            />
          </div>
          
          <div class="setting-item">
            <label>自动刷新</label>
            <el-switch v-model="chartSettings.autoRefresh" />
          </div>
          
          <div class="setting-item" v-if="chartSettings.autoRefresh">
            <label>刷新间隔(秒)</label>
            <el-input-number 
              v-model="chartSettings.refreshInterval"
              :min="5"
              :max="300"
              size="small"
            />
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="resetSettings">重置</el-button>
          <el-button @click="closeSettings">取消</el-button>
          <el-button @click="saveSettings" type="primary">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted, h } from 'vue'
import {
  ResponsiveContainer,
  LineChart,
  BarChart,
  AreaChart,
  ScatterChart,
  Line,
  Bar,
  Area,
  Scatter,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from 'recharts'
import {
  ElSelect,
  ElOption,
  ElButton,
  ElButtonGroup,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElDialog,
  ElSwitch,
  ElInputNumber,
  ElColorPicker,
  ElIcon,
  ElMessage
} from 'element-plus'
import { Loading } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  subtitle: {
    type: String,
    default: ''
  },
  data: {
    type: Array,
    default: () => []
  },
  metrics: {
    type: Array,
    default: () => []
  },
  showMetrics: {
    type: Boolean,
    default: true
  },
  height: {
    type: [String, Number],
    default: 400
  },
  loading: {
    type: Boolean,
    default: false
  },
  xAxisKey: {
    type: String,
    default: 'date'
  },
  autoRefresh: {
    type: Boolean,
    default: false
  },
  refreshInterval: {
    type: Number,
    default: 30
  }
})

// Emits
const emit = defineEmits([
  'time-range-change',
  'chart-type-change',
  'metric-toggle',
  'refresh-data',
  'export-chart',
  'settings-change'
])

// 响应式数据
const selectedTimeRange = ref('7d')
const selectedChartType = ref('line')
const selectedMetrics = ref([])
const isLoading = ref(props.loading)
const settingsDialogVisible = ref(false)
const refreshTimer = ref(null)

// 时间范围选项
const timeRanges = ref([
  { label: '最近7天', value: '7d' },
  { label: '最近30天', value: '30d' },
  { label: '最近3个月', value: '3m' },
  { label: '最近6个月', value: '6m' },
  { label: '最近1年', value: '1y' },
  { label: '自定义', value: 'custom' }
])

// 图表类型选项
const chartTypes = ref([
  { label: '折线图', value: 'line', icon: 'fas fa-chart-line' },
  { label: '柱状图', value: 'bar', icon: 'fas fa-chart-bar' },
  { label: '面积图', value: 'area', icon: 'fas fa-chart-area' },
  { label: '散点图', value: 'scatter', icon: 'fas fa-braille' }
])

// 默认指标数据
const defaultMetrics = ref([
  {
    key: 'heartRate',
    label: '心率',
    icon: 'fas fa-heartbeat',
    color: '#e74c3c',
    unit: 'bpm',
    value: 72,
    change: 2.5
  },
  {
    key: 'bloodPressure',
    label: '血压',
    icon: 'fas fa-tint',
    color: '#3498db',
    unit: 'mmHg',
    value: 120,
    change: -1.2
  },
  {
    key: 'weight',
    label: '体重',
    icon: 'fas fa-weight',
    color: '#2ecc71',
    unit: 'kg',
    value: 65.5,
    change: 0.8
  },
  {
    key: 'steps',
    label: '步数',
    icon: 'fas fa-walking',
    color: '#f39c12',
    unit: '步',
    value: 8500,
    change: 15.3
  },
  {
    key: 'sleep',
    label: '睡眠',
    icon: 'fas fa-bed',
    color: '#9b59b6',
    unit: '小时',
    value: 7.5,
    change: -5.2
  }
])

// 图表设置
const chartSettings = ref({
  showGrid: true,
  showLegend: true,
  showDots: true,
  smoothLine: false,
  dataPoints: 30,
  autoRefresh: props.autoRefresh,
  refreshInterval: props.refreshInterval
})

// 计算属性
const metrics = computed(() => {
  return props.metrics.length > 0 ? props.metrics : defaultMetrics.value
})

const chartData = computed(() => {
  if (props.data.length > 0) {
    return props.data
  }
  
  // 生成模拟数据
  return generateMockData()
})

const activeMetrics = computed(() => {
  if (selectedMetrics.value.length === 0) {
    return metrics.value.slice(0, 3) // 默认显示前3个指标
  }
  
  return metrics.value.filter(metric => 
    selectedMetrics.value.includes(metric.key)
  )
})

const scatterData = computed(() => {
  // 为散点图准备数据
  return chartData.value.map(item => ({
    x: item[scatterXKey.value] || item.heartRate,
    y: item[scatterYKey.value] || item.bloodPressure,
    ...item
  }))
})

const scatterXKey = ref('heartRate')
const scatterYKey = ref('bloodPressure')

const chartMargin = computed(() => ({
  top: 20,
  right: 30,
  left: 20,
  bottom: 20
}))

// 方法
const generateMockData = () => {
  const data = []
  const now = new Date()
  const days = selectedTimeRange.value === '7d' ? 7 : 
               selectedTimeRange.value === '30d' ? 30 : 
               selectedTimeRange.value === '3m' ? 90 : 
               selectedTimeRange.value === '6m' ? 180 : 365
  
  for (let i = days - 1; i >= 0; i--) {
    const date = new Date(now.getTime() - i * 24 * 60 * 60 * 1000)
    const item = {
      date: date.toISOString().split('T')[0],
      timestamp: date.getTime(),
      heartRate: 65 + Math.random() * 20 + Math.sin(i * 0.1) * 5,
      bloodPressure: 115 + Math.random() * 15 + Math.cos(i * 0.15) * 8,
      weight: 65 + Math.random() * 2 - 1 + Math.sin(i * 0.05) * 0.5,
      steps: 6000 + Math.random() * 6000 + Math.sin(i * 0.2) * 2000,
      sleep: 6.5 + Math.random() * 2 + Math.sin(i * 0.12) * 0.8
    }
    data.push(item)
  }
  
  return data
}

const onTimeRangeChange = (value) => {
  selectedTimeRange.value = value
  emit('time-range-change', value)
  refreshData()
}

const toggleMetric = (metricKey) => {
  const index = selectedMetrics.value.indexOf(metricKey)
  if (index > -1) {
    selectedMetrics.value.splice(index, 1)
  } else {
    selectedMetrics.value.push(metricKey)
  }
  
  emit('metric-toggle', selectedMetrics.value)
}

const refreshData = () => {
  isLoading.value = true
  emit('refresh-data')
  
  // 模拟加载延迟
  setTimeout(() => {
    isLoading.value = false
  }, 1000)
}

const handleCommand = (command) => {
  switch (command) {
    case 'export':
      exportChart()
      break
    case 'fullscreen':
      toggleFullscreen()
      break
    case 'refresh':
      refreshData()
      break
    case 'settings':
      settingsDialogVisible.value = true
      break
  }
}

const exportChart = () => {
  emit('export-chart')
  ElMessage.success('图表导出功能开发中')
}

const toggleFullscreen = () => {
  ElMessage.info('全屏功能开发中')
}

const formatMetricValue = (metric) => {
  if (typeof metric.value === 'number') {
    return metric.value.toLocaleString() + (metric.unit || '')
  }
  return metric.value
}

const getChangeClass = (change) => {
  if (change > 0) return 'positive'
  if (change < 0) return 'negative'
  return 'neutral'
}

const getChangeIcon = (change) => {
  if (change > 0) return 'fas fa-arrow-up'
  if (change < 0) return 'fas fa-arrow-down'
  return 'fas fa-minus'
}

const formatXAxisTick = (value) => {
  if (typeof value === 'string' && value.includes('-')) {
    const date = new Date(value)
    return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
  }
  return value
}

const formatYAxisTick = (value) => {
  if (typeof value === 'number') {
    if (value >= 1000) {
      return (value / 1000).toFixed(1) + 'k'
    }
    return value.toFixed(0)
  }
  return value
}

const getScatterData = (metricKey) => {
  return chartData.value.map(item => ({
    x: item[scatterXKey.value],
    y: item[metricKey]
  }))
}

const updateMetricColor = (metricKey, color) => {
  const metric = metrics.value.find(m => m.key === metricKey)
  if (metric) {
    metric.color = color
  }
}

const saveSettings = () => {
  emit('settings-change', chartSettings.value)
  settingsDialogVisible.value = false
  ElMessage.success('设置已保存')
}

const resetSettings = () => {
  chartSettings.value = {
    showGrid: true,
    showLegend: true,
    showDots: true,
    smoothLine: false,
    dataPoints: 30,
    autoRefresh: false,
    refreshInterval: 30
  }
}

const closeSettings = () => {
  settingsDialogVisible.value = false
}

const startAutoRefresh = () => {
  if (chartSettings.value.autoRefresh && !refreshTimer.value) {
    refreshTimer.value = setInterval(() => {
      refreshData()
    }, chartSettings.value.refreshInterval * 1000)
  }
}

const stopAutoRefresh = () => {
  if (refreshTimer.value) {
    clearInterval(refreshTimer.value)
    refreshTimer.value = null
  }
}

// 自定义 Tooltip 组件
const CustomTooltip = ({ active, payload, label }) => {
  if (!active || !payload || !payload.length) {
    return null
  }
  
  return h('div', {
    class: 'custom-tooltip',
    style: {
      background: 'rgba(255, 255, 255, 0.95)',
      border: '1px solid #e0e0e0',
      borderRadius: '8px',
      padding: '12px',
      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
    }
  }, [
    h('div', {
      style: {
        color: '#333',
        fontWeight: '600',
        marginBottom: '8px',
        fontSize: '14px'
      }
    }, formatXAxisTick(label)),
    ...payload.map(entry => 
      h('div', {
        key: entry.dataKey,
        style: {
          color: entry.color,
          fontSize: '13px',
          marginBottom: '4px',
          display: 'flex',
          alignItems: 'center',
          gap: '8px'
        }
      }, [
        h('div', {
          style: {
            width: '8px',
            height: '8px',
            borderRadius: '50%',
            backgroundColor: entry.color
          }
        }),
        h('span', {}, `${entry.name}: ${entry.value}`)
      ])
    )
  ])
}

// 自定义 Legend 组件
const CustomLegend = ({ payload }) => {
  if (!payload || !payload.length) {
    return null
  }
  
  return h('div', {
    class: 'custom-legend',
    style: {
      display: 'flex',
      justifyContent: 'center',
      gap: '20px',
      flexWrap: 'wrap'
    }
  }, payload.map(entry => 
    h('div', {
      key: entry.value,
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '6px',
        fontSize: '12px',
        color: '#666'
      }
    }, [
      h('div', {
        style: {
          width: '12px',
          height: '12px',
          borderRadius: '50%',
          backgroundColor: entry.color
        }
      }),
      h('span', {}, entry.value)
    ])
  ))
}

// 自定义散点图 Tooltip
const CustomScatterTooltip = ({ active, payload }) => {
  if (!active || !payload || !payload.length) {
    return null
  }
  
  const data = payload[0].payload
  
  return h('div', {
    class: 'custom-tooltip',
    style: {
      background: 'rgba(255, 255, 255, 0.95)',
      border: '1px solid #e0e0e0',
      borderRadius: '8px',
      padding: '12px',
      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
    }
  }, [
    h('div', { style: { fontWeight: '600', marginBottom: '8px' } }, 
      formatXAxisTick(data.date)
    ),
    h('div', { style: { fontSize: '13px', marginBottom: '4px' } }, 
      `X: ${data.x}`
    ),
    h('div', { style: { fontSize: '13px' } }, 
      `Y: ${data.y}`
    )
  ])
}

// 生命周期
onMounted(() => {
  // 初始化选中的指标
  if (selectedMetrics.value.length === 0) {
    selectedMetrics.value = metrics.value.slice(0, 3).map(m => m.key)
  }
  
  // 启动自动刷新
  if (chartSettings.value.autoRefresh) {
    startAutoRefresh()
  }
})

onUnmounted(() => {
  stopAutoRefresh()
})

// 监听设置变化
watch(() => chartSettings.value.autoRefresh, (newValue) => {
  if (newValue) {
    startAutoRefresh()
  } else {
    stopAutoRefresh()
  }
})

watch(() => chartSettings.value.refreshInterval, () => {
  if (chartSettings.value.autoRefresh) {
    stopAutoRefresh()
    startAutoRefresh()
  }
})

watch(() => selectedChartType.value, (newType) => {
  emit('chart-type-change', newType)
})

watch(() => props.loading, (newValue) => {
  isLoading.value = newValue
})
</script>

<style scoped>
.health-chart-component {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
}

.header-left {
  flex: 1;
}

.chart-title {
  color: #2c5aa0;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-subtitle {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.time-range-select {
  width: 120px;
}

.chart-type-group {
  display: flex;
}

.metrics-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.metric-card {
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.metric-card:hover {
  border-color: #2c5aa0;
  background: #f0f7ff;
  transform: translateY(-1px);
}

.metric-card.active {
  border-color: #2c5aa0;
  background: #e6f7ff;
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}

.metric-content {
  flex: 1;
  min-width: 0;
}

.metric-label {
  color: #666;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 2px;
}

.metric-value {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 2px;
}

.metric-change {
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
}

.metric-change.positive {
  color: #27ae60;
}

.metric-change.negative {
  color: #e74c3c;
}

.metric-change.neutral {
  color: #95a5a6;
}

.chart-container {
  position: relative;
  height: v-bind('height + "px"');
  min-height: 300px;
  border-radius: 8px;
  overflow: hidden;
}

.chart-container.loading {
  background: #f8f9fa;
}

.chart-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(248, 249, 250, 0.9);
  z-index: 10;
}

.chart-loading .el-icon {
  font-size: 32px;
  color: #2c5aa0;
  margin-bottom: 10px;
}

.chart-loading p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.chart-empty {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.chart-empty h4 {
  color: #666;
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.chart-empty p {
  color: #999;
  font-size: 14px;
  margin: 0 0 20px 0;
}

.chart-content {
  width: 100%;
  height: 100%;
}

.line-chart,
.bar-chart,
.area-chart,
.scatter-chart {
  width: 100%;
  height: 100%;
}

/* 图表设置对话框 */
.chart-settings {
  max-height: 500px;
  overflow-y: auto;
}

.setting-section {
  margin-bottom: 25px;
}

.setting-section h4 {
  color: #333;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.setting-item label {
  color: #666;
  font-size: 13px;
  font-weight: 500;
}

.color-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.color-setting label {
  color: #666;
  font-size: 13px;
  font-weight: 500;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chart-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .header-right {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .metrics-cards {
    grid-template-columns: 1fr;
  }
  
  .metric-card {
    padding: 12px;
  }
  
  .metric-icon {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
  
  .metric-value {
    font-size: 16px;
  }
  
  .chart-container {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .health-chart-component {
    padding: 15px;
  }
  
  .chart-title {
    font-size: 16px;
  }
  
  .header-right {
    flex-direction: column;
    align-items: stretch;
  }
  
  .time-range-select {
    width: 100%;
  }
  
  .chart-type-group {
    justify-content: center;
  }
}
</style>